<template>
  <div class="container">
    <div class="top">
      <el-date-picker
        value-format="yyyy-MM-dd"
        v-model="value1"
        type="date"
        :clearable="false"
        placeholder="选择日期"
      ></el-date-picker>
      <el-cascader
        v-model="cascader"
        placeholder="水果01"
        :collapse-tags="true"
        :clearable="true"
        :options="treeData"
        :props="defaultProps"
        @change="handleNodeClick"
      ></el-cascader>

      <el-cascader
        v-model="classcascader"
        placeholder="请选择分类"
        :collapse-tags="true"
        :clearable="true"
        :options="classtreeData"
        :props="classdefaultProps"
        @change="handleclassNodeClick"
      ></el-cascader>

      <el-button
        size="small"
        type="primary"
        class="handleSearch"
        icon="el-icon-search"
        @click="handleSearch()"
        >查询</el-button
      >
      <el-button
        size="small"
        type="danger"
        class="handleSearch"
        icon="el-icon-delete"
        @click="empty()"
        >清空</el-button
      >
      <el-button
        type="info"
        size="small"
        icon="el-icon-tickets"
        @click="derive()"
        >导出</el-button
      >
    </div>
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item title="同比环比" name="1000">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          empty-text="暂无数据"
          max-height="500px"
        >
          <el-table-column
            prop="dt"
            label="时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orgName"
            label="门店名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orgCode"
            label="机构编码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="money"
            label="销售金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="qty"
            label="销售数量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="yesterdayMoney"
            label="环比金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="yesterdayDiff"
            label="环比增减额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="yesterdayDiffRate"
            label="环比增减率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lastYearMoney"
            label="同比金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lastYearDiff"
            label="同比增减额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lastYearDiffRate"
            label="同比增减率"
            align="center"
          ></el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="品类收入" name="1001">
        <el-table
          :data="tableData1"
          border
          style="width: 100%"
          empty-text="暂无数据"
          max-height="500px"
          @row-click="openDetails"
        >
          <el-table-column
            prop="productClassName"
            label="品类名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="productClassMoney"
            label="品类销售金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="productClassNum"
            label="品类销售数量"
            align="center"
          ></el-table-column>
          <!-- <el-table-column label="操作" align="center" width="360px">
            <template slot-scope="scope">
              <el-button
                type="info"
                size="mini"
                icon="el-icon-info"
                @click="particulars(scope)"
                >详情</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="前十商品" name="1002">
        <el-collapse v-model="activeName" accordion v-loading="tenloading">
          <el-collapse-item
            v-for="(value, key, index) in tablekey"
            :title="key"
            :name="index"
          >
            <el-table
              id="backcolor"
              :data="value"
              border
              style="width: 100%"
              empty-text="暂无数据"
            >
              <el-table-column
                prop="productName"
                label="商品名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="productClassName"
                label="商品品类"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="productNum"
                label="数量（公斤）"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="price"
                label="单价"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="money"
                label="金额（元）"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="purchasePrice"
                label="进货单价"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="profit"
                label="毛利"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="profitRate"
                label="毛利率"
                align="center"
              ></el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import {
  getShopData,
  getProductClassReportData,
  getProductReportData,
  getProductClassInfoTree,
  getLastLeaf,
} from "@/api/dataTableapi/dataTableapiList";
import { getToken } from "@/utils/auth";
import { getnowDate } from "@/utils/index";
export default {
  components: {},
  data() {
    return {
      //页面数据
      activeNames: "1000",
      activeName: "",
      tableData: [],
      tableData1: [],
      tablekey: {},
      treeData: [],
      classtreeData: [],
      value1: this.getyeasterdata(),
      cascader: [],
      classcascader: [],
      search: {
        value: "水果01",
        id: "123",
        classid: "",
      },
      defaultProps: {
        checkStrictly: true,
        multiple: true,
        children: "data",
        label: "name",
        value: "id",
      },
      classdefaultProps: {
        multiple: true,
        children: "data",
        label: "name",
        value: "id",
      },
    };
  },
  created() {
    //页面数据
    this.getData();
    this.getsearchData();
    this.getclassData();
  },
  methods: {
    //页面数据
    getData() {
      this.loading = true;
      this.tenloading = true;
      let data = "time=" + this.value1;
      getShopData(data)
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
            this.loading = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });

      let data1 = "time=" + this.value1 + "&productIds=" + this.search.classid;
      getProductClassReportData(data1)
        .then((res) => {
          if (res.code == 0) {
            this.tableData1 = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      let categoryNameListid = this.search.id ? this.search.id : "123";
      let categoryNameListname = this.search.value
        ? this.search.value
        : "水果01";
      let data2 = "time=" + this.value1 + "&ids=" + categoryNameListid;
      getProductReportData(data2)
        .then((res) => {
          if (res.code == 0) {
            var datas = res.data;
            for (var pads in datas) {
              this.tablekey = this.modifyJosnKey(
                datas,
                pads,
                "\xa0\xa0\xa0\xa0" + pads
              );
            }
            this.tenloading = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    modifyJosnKey(json, oddkey, newkey) {
      var val = json[oddkey];
      delete json[oddkey];
      json[newkey] = val;
      return json;
    },
    //商品
    getsearchData() {
      getProductClassInfoTree()
        .then((res) => {
          this.treeData = res.data.data;
          this.search.id = 123;
          this.search.value = "水果01";
          this.cascader = 123;
        })
        .then(() => {});
    },
    //分类
    getclassData() {
      getLastLeaf()
        .then((res) => {
          this.classtreeData = res.data.data;
        })
        .then(() => {});
    },
    //具体操作
    openDetails(row) {
      console.log(row.productClassName);
    },

    //选取区域
    handleNodeClick(data) {
      console.log(data, 12142);
      var dataarr = [];
      var fatherarr = [];
      for (var i = 0; i < data.length; i++) {
        var arrer = data[i];
        if (arrer.length == 1) {
          dataarr.push(arrer[0]);
        } else if (arrer.length == 2) {
          fatherarr.push(arrer[0]);
          dataarr.push(arrer[1]);
        } else if (arrer.length == 3) {
          fatherarr.push(arrer[0]);
          fatherarr.push(arrer[1]);
          dataarr.push(arrer[2]);
        } else if (arrer.length == 4) {
          fatherarr.push(arrer[0]);
          fatherarr.push(arrer[1]);
          fatherarr.push(arrer[2]);
          dataarr.push(arrer[3]);
        } else if (arrer.length == 5) {
          fatherarr.push(arrer[0]);
          fatherarr.push(arrer[1]);
          fatherarr.push(arrer[2]);
          fatherarr.push(arrer[3]);
          dataarr.push(arrer[4]);
        }
      }
      for (var j = 0; j < dataarr.length; j++) {
        var a = fatherarr.indexOf(dataarr[j]);
        if (a > -1) {
          //包含
          dataarr.splice(j, 1);
        }
      }
      var idstr = dataarr.toString();
      this.search.id = idstr || "";
    },
    //选取区域
    handleclassNodeClick(data) {
      console.log(data, 12142);
      var dataarr = [];
      for (var i = 0; i < data.length; i++) {
        var arrer = data[i];
        dataarr.push(arrer[arrer.length - 1]);
      }
      var idstr = dataarr.toString();
      this.search.classid = idstr || "";
    },
    // 本地搜索
    handleSearch() {
      this.getData();
    },
    //清空
    empty() {
      (this.search = {
        value: "水果01",
        id: "123",
        classid: "",
      }),
        (this.value1 = this.getyeasterdata());
      this.cascader = [];
      this.classcascader = [];
    },
    getyeasterdata() {
      var day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      var s1 =
        day1.getFullYear() + "-" + ((day1.getMonth() + 1)>9?(day1.getMonth() + 1):'0'+(day1.getMonth() + 1)) + "-" + (day1.getDate()>9? day1.getDate():'0'+ day1.getDate());
      return s1;
    },
    //导出
    derive() {
      this.$confirm("是否导出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let link = document.createElement("a");
          let categoryNameListid = this.search.id ? this.search.id : "123";
          let categoryNameListname = this.search.name
            ? this.search.name
            : "水果01";
          link.href =
            this.$axios.defaults.baseURLs +
            "/reportController/getReportExcel?token=" +
            getToken() +
            "&ids=" +
            categoryNameListid +
            "&time=" +
            this.value1 +
            "&productIds=" +
            this.search.classid;
          link.click();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
  },
};
</script>
<style scoped>
.top {
  position: relative;
}
.add {
  position: absolute;
  right: 0;
  top: 4px;
}
</style>